<template>
  <div class="product-list-page section-padding">
    <div class="container mx-auto px-4">
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- 产品项循环 -->
        <div v-for="product in productList" :key="product.id"
          class="product-item bg-white rounded-lg shadow hover:shadow-lg transition-all overflow-hidden">
          <router-link :to="`/product/${product.id}`">
            <img :src="product.image" alt="产品图片" class="w-full h-64 object-cover">
            <div class="p-4">
              <h3 class="font-bold text-lg mb-2">{{ product.name }}</h3>
              <p class="text-gray-600 text-sm line-clamp-3">{{ product.desc }}</p>
            </div>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GuestProductList',
  data() {
    return {
      productList: [
        {
          id: 1,
          name: 'Prometheus600科研无人机',
          image: 'https://picsum.photos/600/400?random=1',
          desc: 'P600系列第四代产品，深度融合Prometheus和SpireCV，具备超远距离目标检测与跟踪能力。'
        },
        {
          id: 2,
          name: '多旋翼无人机集群',
          image: 'https://picsum.photos/600/400?random=2',
          desc: '多台无人机协同作业，适用于大范围巡检、物流配送等场景。'
        },
        {
          id: 3,
          name: '工业级巡检无人机',
          image: 'https://picsum.photos/600/400?random=3',
          desc: '搭载高清摄像头和传感器，用于电力、管道等工业场景的智能巡检。'
        },
        {
          id: 4,
          name: '消费级航拍无人机',
          image: 'https://picsum.photos/600/400?random=4',
          desc: '轻便易操作，具备4K高清拍摄和智能避障功能，适合航拍爱好者。'
        },
        {
          id: 5,
          name: '农业植保无人机',
          image: 'https://picsum.photos/600/400?random=5',
          desc: '高效喷洒农药，精准控制，助力现代农业智能化发展。'
        },
        {
          id: 6,
          name: '警用安防无人机',
          image: 'https://picsum.photos/600/400?random=6',
          desc: '配备热成像和喊话装置，用于治安巡逻、应急救援等场景。'
        }
      ]
    }
  }
}
</script>

<style scoped>
.section-padding {
  padding: 2rem 0;
}

.product-item {
  transition: all 0.3s ease;
}

.product-item:hover {
  transform: translateY(-5px);
}
</style>